import { convert } from "css-color-function";

const formula: Record<string, string> = {
  "primary-light-1": "color(xxxx tint(10%))",
  "primary-light-2": "color(xxxx tint(20%))",
  "primary-light-3": "color(xxxx tint(30%))",
  "primary-light-4": "color(xxxx tint(40%))",
  "primary-light-5": "color(xxxx tint(50%))",
  "primary-light-6": "color(xxxx tint(60%))",
  "primary-light-7": "color(xxxx tint(70%))",
  "primary-light-8": "color(xxxx tint(80%))",
  "primary-light-9": "color(xxxx tint(90%))"
};

const generateColors = (primary: string) => {
  const colors: Record<string, string> = {};
  Object.keys(formula).forEach((key) => {
    const value = formula[key].replace(/xxxx/g, primary);
    colors[key] = convert(value);
  });

  return colors;
};

const setColors = (colors: Record<string, string>) => {
  const htmlElment = document.documentElement; //获取html

  Object.entries(colors).forEach(([key, value]) => {
    htmlElment.style.setProperty(`--el-color-${key}`, value);
  });
};

export { generateColors, setColors };
